<!--
 * @Description:
 * @Author: ZachGmy
 * @Date: 2020-09-03 09:57:40
 * @LastEditors: zxda 10254467+zxda@user.noreply.gitee.com
 * @LastEditTime: 2022-06-26 20:24:21
-->
<template>
  <div>
    <div class="realTime">
      <!-- 城市对比折线图 -->
      <div id="city_container" style="height: 700px; "></div>
      <!-- 实时动态图 -->
      <div id="realTime_container" style="height: calc(100vh / 2)"></div>
    </div>
  </div>
</template>

<script >
  export default {
  mounted() {
    //城市对比折线图
    Highcharts.chart("city_container", {
      chart: {
        type: "line",
      },
      //标题
      title: {
        text: "城市疫情对比图",
      },
      //副标题
      subtitle: {
        text: "数据来源: 广西科技大学",
      },
      lang: {
        printChart: '打印图表',
        downloadJPEG: '下载 JPEG 文件',
        downloadPDF: '下载 PDF   文件',
        downloadPNG: '下载 PNG  文件',
        downloadSVG: '下载 SVG  文件',
        downloadCSV: '下载 CSV  文件',
        downloadXLS: '下载 XLS   文件',
        viewData: '查看数据表格'
      },
      
      //x轴
      xAxis: {
        categories: [
          "一月",
          "二月",
          "三月",
          "四月",
          "五月",
          "六月",
          "七月",
          "八月",
          "九月",
          "十月",
          "十一月",
          "十二月",
        ],
      },
      //y轴
      yAxis: {
        title: {
          text: "数量 (个)",
        },
        //在y轴20处添加标示线
        plotLines: [{
          color: 'red',           //线的颜色，定义为红色
          dashStyle: 'ShortDash',     //默认值，这里定义为实线
          value: 20,               //定义在那个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线
          width: 2                //标示线的宽度，2px
        }]
      },
      //数据标签：在数据点上显示一些数据信息标签
      plotOptions: {
        line: {
          dataLabels: {
            // 开启数据标签
            enabled: true,
          },
        },
      },
      //鼠标移入提示  提示框
      tooltip: {
        headerFormat: '<span style="font-size: 10px">{point.key}</span><br/>',
        pointFormat:
          '<span style="color:{series.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>',
        shared: true,
      },
      series: [
        {
          name: "广西",
          data: [
            7, 6, 9, 14, 18, 21, 25, 26, 23, 18, 13, 9,
          ],
        },
        {
          name: "河南",
          data: [
            4, 4, 5, 8, 11, 15, 17, 16, 14, 10, 6, 4,
          ],
          color: 'green',
        },
        {
          name: "北京",
          data: [0, 1, 1, 1, 8, 10, 15, 18, 22, 25, 10, 8],
          color:'black',
        }
      ],
    });
    

    //实时动态图
      Highcharts.setOptions({
      
      global: {
        useUTC: false,
      },
    });
    function activeLastPointToolip(chart) {
      var points = chart.series[0].points;
      chart.tooltip.refresh(points[points.length - 1]);
    }
    var chart = Highcharts.chart("realTime_container", {
      chart: {
        type: "spline",
        marginRight: 10,
        events: {
          load: function () {
            var series = this.series[0],
              chart = this;
            activeLastPointToolip(chart);
            setInterval(function () {
              var x = new Date().getTime(), // 当前时间
                y = Math.random(); // 随机值
              series.addPoint([x, y], true, true);
              activeLastPointToolip(chart);
            }, 2000);
          },
        },
      },
      title: {
        text: "动态模拟实时数据",
      },
      lang: {
        printChart: '打印图表',
        downloadJPEG: '下载 JPEG 文件',
        downloadPDF: '下载 PDF   文件',
        downloadPNG: '下载 PNG  文件',
        downloadSVG: '下载 SVG  文件',
        downloadCSV: '下载 CSV  文件',
        downloadXLS: '下载 XLS   文件',
        viewData: '查看数据表格'
      },
      xAxis: {
        type: "datetime",
        tickPixelInterval: 150,
      },
      yAxis: {
        title: {
          text: null,
        },
      },
      tooltip: {
        formatter: function () {
          return (
            "<b>" +
            this.series.name +
            "</b><br/>" +
            Highcharts.dateFormat("%Y-%m-%d %H:%M:%S", this.x) +
            "<br/>" +
            Highcharts.numberFormat(this.y, 2)
          );
        },
      },
      legend: {
        enabled: false,
      },
      series: [
        {
          name: "随机数据",
          data: (function () {
            // 生成随机值
            var data = [],
              time = new Date().getTime(),
              i;
            for (i = -19; i <= 0; i += 1) {
              data.push({
                x: time + i * 1000,
                y: Math.random(),
              });
            }
            return data;
          })(),
        },
      ],
    });
  },

  }
</script>

<style scoped>

.data-preview {
  position: absolute;
  bottom: 0;
  background: #eee;
  padding: 0 20px;
}

</style>
